<style>
	/*auth-page_title*/
	.auth-page_title { padding: 30rpx 30rpx 0; color: #333; font-size: 28rpx; font-weight: 700; }

	/*auth-page_images*/
	.auth-page_images { padding: 20rpx 30rpx 30rpx; }
	.auth-page_images .cell { padding: 1rpx; height: 200rpx; text-align: center; background: #f5f5f5; border-radius: 10rpx; overflow: hidden; }
	.auth-page_images .cell .icon { margin: 36rpx auto 0; width: 132rpx; height: 88rpx; }
	.auth-page_images .cell .desc { font-size: 24rpx; color: rgba(51, 51, 51, 0.50); }
</style>

<template>
	<view>
		<an-nav-bar title="实名认证"> </an-nav-bar>

		<view style=" padding: 20rpx 32rpx 0; color: #999;">为保证您的账户安全，请先完成实名认证</view>

		<view class="rwrap" style=" padding: 30rpx 0; text-align: center;">
			1.填写信息 - 2.上传照片 - 3.提交审核
		</view>

		<view class="rwrap">
			<view class="auth-page_title">证件图片</view>
			<view class="auth-page_images">
				<view class="flex2">
					<view class="flex-1">
						<view class="cell" @click="uploadField='frontImg';$refs.refUploadImage.init();">
							<template v-if="editFormValue.frontImg">
								<image mode="scaleToFill" class="image" :src="$common.binImage(editFormValue.frontImg)"></image>
							</template>
							<template v-else>
								<view class="icon">
									<image mode="scaleToFill" class="image" src="/static/image/auth-idcard1.png"></image>
								</view>
								<view class="desc">身份证正面</view>
							</template>
						</view>
					</view>
					<view class="flex-0" style="width: 22rpx;"></view>
					<view class="flex-1">
						<view class="cell" @click="uploadField='backgroundImg';$refs.refUploadImage.init();">
							<template v-if="editFormValue.backgroundImg">
								<image mode="scaleToFill" class="image" :src="$common.binImage(editFormValue.backgroundImg)"></image>
							</template>
							<template v-else>
								<view class="icon">
									<image mode="scaleToFill" class="image" src="/static/image/auth-idcard2.png"></image>
								</view>
								<view class="desc">身份证反面</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="rwrap">
			<view class="auth-page_title">身份信息</view>
			<view class="field-list">
				<view class="cell">
					<view class="_lable _required">您的姓名</view>
					<view class="_value">
						<input class="__input" v-model="editFormValue.realName" placeholder="请输入" />
					</view>
				</view>
				<view class="cell">
					<view class="_lable _required">身份证号</view>
					<view class="_value">
						<input class="__input" v-model="editFormValue.idCard" placeholder="请输入" />
					</view>
				</view>
			</view>
		</view>

		<view style="padding: 40rpx 32rpx;">
			<button class="theme-btn" :disabled="editBtnDisabled" @click="editFormSubmit">提交</button>
		</view>

		<!-- 组件 -->
		<UploadImage ref="refUploadImage" @sync="syncUploadImage" />
	</view>
</template>

<script>
	import {
		userRequest,
		saveRequest,
	} from "@/api/customer"

	import UploadImage from "@/components/upload/image"

	export default {
		components: {
			UploadImage,
		},
		data() {
			return {
				uploadField: '',

				editBtnDisabled: false,
				editFormValue: {
					frontImg: '', // 身份证正面
					backgroundImg: '', // 身份证背面
					realName: '',
					idCard: '',
				},
				editFormRuleField: ["realName", "idCard", ],
				editFormRule: {},
			}
		},
		onLoad(options) {
			this.getUser()
		},
		onShow() {

		},
		methods: {
			getUser() {
				userRequest().then(res => {
					if (res && res.customer) {
						this.editFormValue = res.customer
					}
				})
			},
			editFormSubmit() {
				let valid = this.$common.validate(this.editFormValue, this.editFormRuleField)
				if (!valid) {
					this.$common.toast('请填写带*必填项')
					return false
				}

				if (!this.editFormValue.frontImg || !this.editFormValue.backgroundImg) {
					this.$common.toast('请上传身份证')
					return false
				}

				this.editBtnDisabled = true
				saveRequest(this.editFormValue, true).then(res => {
					uni.navigateBack()
				})
				// let pages = getCurrentPages()
				// let prePage = pages[pages.length - 2]
				// let formValue = prePage.$vm.technicianForm
				// prePage.$vm.technicianForm = Object.assign(formValue, this.editFormValue)
				// uni.navigateBack({
				// 	delta: 1
				// })
				setTimeout(() => {
					this.editBtnDisabled = false
				}, 2000)
			},
			syncUploadImage(url) {
				this.editFormValue[this.uploadField] = url
			},
		},
	}
</script>
